<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import dataselct from "../dataselect.vue";
import { onMounted, ref } from "vue";
import { useServerStore } from "../../store/server";
const oneid = ref(1);
const itemid = (id: number) => {
  oneid.value = id;
};
const store = useServerStore();
import hdialog from "../r-dialog.vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { get } from "../../request";
const bntlist = [

];
const getshow = async () => {
  let res = await get("/client/getmony");
  tableDataone.value = res.data;
  filterTable.value = res.data;
};
onMounted(() => {
  getshow();
});
// import { ElTable, ElTableColumn, ElButton } from "element-plus";
const tableDataone = ref([]);
const filterTable = ref([]);
// const value = ref("");
const options = [
  {
    value: "[H5]-007 谷歌合同",
    label: "[H5]-007 谷歌合同",
  },
 
];
const option = [
  {
    value: "以付款",
    label: "以付款",
  },
  {
    value: "未付款",
    label: "未付款",
  },
 
];
const optionsone = [
  {
    value: "是",
    label: "是",
  },
  {
    value: "否",
    label: "否",
  },

];
interface Contract {
  base_name: string; // 申请人
  base_deptname: string; // 申请人部门
  sericnum: string; // 单号
  optname: string; // 所属人
  hitd: string; // 合同
  num: string; // 合同编号
  dt: string; // 所属日期
  custid: string; // 客户名称
  custname: string; // 客户名称
  type: string; // 合同类型
  moneys: string; // 待收/付金额
  ispay: string; // 是否付款
  paydt: string; // 付款时间
  explain: string; // 说明
  createname: string; // 创建人
  lie: string; // 操作列
}
const list = ref([
  { id: 1, type: "base_name", flag: true, name: "申请人", value: "管理员" },
  {
    id: 2,
    type: "base_deptname",
    flag: true,
    name: "申请人部门",
    value: "开发部",
  },
  { id: 3, type: "sericnum", flag: true, name: "单号", value: "" },
  { id: 4, type: "optname", flag: true, name: "所属人", value: "" },
  { id: 5, type: "hitd", flag: true, name: "合同", value: "" },
  { id: 6, type: "num", flag: true, name: "合同编号", value: "" },
  { id: 7, type: "dt", flag: true, name: "所属日期", value: "" },
  { id: 8, type: "custid", flag: true, name: "客户名称", value: "" },
  { id: 9, type: "custname", flag: true, name: "客户名称", value: "" },
  { id: 10, type: "type", flag: true, name: "合同类型", value: "" },
  { id: 11, type: "moneys", flag: true, name: "待收/付金额", value: "" },
  { id: 12, type: "ispay", flag: true, name: "是否付款", value: "" },
  { id: 13, type: "paydt", flag: true, name: "付款时间", value: "" },
  { id: 14, type: "explain", flag: true, name: "说明", value: "" },
  { id: 15, type: "createname", flag: true, name: "创建人", value: "" },
  { id: 16, type: "lie", flag: true, name: "操作列", value: "" },
]);

const inp = ref("");
const handeltable = () => {
  filterTable.value = gettable();
};
const gettable = () => {
  if (inp.value === "") {
    console.log(inp.value);
    return (tableDataone.value = tableDataone.value);
  } else {
    console.log(inp.value);
    return tableDataone.value.filter(
      (item: tableData) =>
        item.name.includes(inp.value) ||
        item.laiyuan.includes(inp.value) ||
        item.address.includes(inp.value) ||
        item.linkname.includes(inp.value) ||
        item.mobile.includes(inp.value) ||
        item.tel.includes(inp.value)
    );
  }
};

const sel = ref(false);
const mo = ref(false);
const xiang = ref(false);
const newlist = ref([]);
const seleed = () => {
  sel.value=false;
  newlist.value = list.value.filter((item) => item.flag);
};
onMounted(() => {
  seleed();
});
const addsx = () => {
  store.addmony();
  mo.value=false;
  getshow();
};
const shows = (items) => {
  xiang.value=true;
  store.showlist(items);
};
const showlist = (row) => {
  var popup = window.open(
    "https://example.com",
    "newWindow",
    "width=800,height=400"
  );
  store.showload(row);

  popup.document.write(`
    <html>
      <head>
        <style>
        .name div {
          border: 1px solid black;
          }
        .namsex {
          width: 800px;
          margin: 0 auto;
        }
        .namsex div{
          height: 50px;
          line-height: 50px;
        }
        .h1{
          font-size: 20px;
          text-align: center;
          margin-bottom: 20px;
        }
        body{
          overflow:hidden;
        }
        </style>
        <title>${row.name}</title>
      </head>
      <body>
        <div class="name">
        <h1 class="h1">客户管理</h1>
        <div class="namsex">
          <div style="display: flex">
          <div style="width: 10%">合同编号</div>
          <div style="width: 90%">${store.list.num}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">客户名称</div>
          <div style="width: 90%">${store.list.custid}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">拥有者</div>
          <div style="width: 90%">${store.list.base_name}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">销售机会</div>
          <div style="width: 90%">${store.list.saleid}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">签约日期</div>
          <div style="width: 90%">${store.list.signdt}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">合同金额</div>
          <div style="width: 90%">${store.list.money}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">生效日期</div>
          <div style="width: 90%">${store.list.startdt}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">截止日期</div>
          <div style="width: 90%">${store.list.enddt}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">合同内容</div>
          <div style="width: 90%">${store.list.content}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">代付款</div>
          <div style="width: 90%">${store.list.statentext}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">说明</div>
          <div style="width: 90%">${store.list.expiain}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">状态</div>
          <div style="width: 90%">已过期</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">创建人</div>
          <div style="width: 90%">${store.list.createname}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">操作时间</div>
          <div style="width: 90%">2024-01-22 08:44:29</div>
        </div>
      </div>
      </body>
    </html>
  `);
};
const ting = ref(false);
const xing = ref(false);
const Ttextarea = ref("");
const tinglog = (row) => {
  store.edit(row);
  ting.value=true;
};

const xingon = () => {
  xing.value = true;
  Ttextarea.value = "";
};
const update = ref(false);
const edit = (row) => {
  store.edit(row);
  update.value=true;
};
const edits = () => {
  store.edits();
  update.value=false;
};
const del = (id) => {
  store.deletes(id);
};

const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
</script>
<template>
  <div>
    <!-- 详情 -->
    <hdialog v-model="ting">
      <template #title>
        <h3>(新增)客户管理</h3>
      </template>
      <p>请输入[停用]说明(必填):</p>
      <textarea
        v-model="Ttextarea"
        style="border: 1px solid black; margin-bottom: 20px"
        name=""
        id=""
        cols="60"
        rows="5"
      ></textarea>
      <textarea
        style="border: 1px solid black"
        name=""
        id=""
        cols="60"
        rows="5"
      ></textarea>
      <el-button>选择文件</el-button>未选择任何文件
      <div>
        <el-button :disabled="Ttextarea.length <= 0" @click="ting.close()"
          >√确定</el-button
        >
        <el-button @click="()=>{ting=false}">×取消</el-button>
      </div>
    </hdialog>
    <hdialog v-model="xing">
      <template #title>
        <h3>(新增)客户管理</h3>
      </template>
      <p>请输入[停用]说明(必填):</p>
      <textarea
        v-model="Ttextarea"
        style="border: 1px solid black; margin-bottom: 20px"
        name=""
        id=""
        cols="60"
        rows="5"
      ></textarea>
      <textarea
        style="border: 1px solid black"
        name=""
        id=""
        cols="60"
        rows="5"
      ></textarea>
      <el-button>选择文件</el-button>未选择任何文件
      <div>
        <el-button :disabled="Ttextarea.length <= 0" @click="()=>{
          xing=false
        }"
          >√确定</el-button
        >
        <el-button @click="()=>{
          ting=false
        }">×取消</el-button>
      </div>
    </hdialog>
    <hdialog v-model="update" :width="`800px`" class="name">
      <h1 class="h1">客户管理</h1>
      <div class="namsex">
        <div style="display: flex">
          <div style="width: 10%">客户名称</div>
          <div style="width: 90%">
            <input style="width: 100%" type="text" v-model="store.data.name" />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">申请人</div>
          <div style="width: 90%">
            <input
              style="width: 100%"
              type="text"
              v-model="store.data.base_name"
            />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">客户类型</div>
          <div style="width: 90%">
            <input style="width: 100%" type="text" v-model="store.data.type" />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">来源</div>
          <div style="width: 90%">
            <input
              style="width: 100%"
              type="text"
              v-model="store.data.laiyuan"
            />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">联系电话</div>
          <div style="width: 90%">
            <input style="width: 100%" type="text" v-model="store.data.tel" />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">所在市</div>
          <div style="width: 90%">
            <input style="width: 100%" type="text" v-model="store.data.shi" />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">所在省</div>
          <div style="width: 90%">
            <input style="width: 100%" type="text" v-model="store.data.sheng" />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">地址</div>
          <div style="width: 90%">
            <input
              style="width: 100%"
              type="text"
              v-model="store.data.address"
            />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">交通路线</div>
          <div style="width: 90%">
            <input
              style="width: 100%"
              type="text"
              v-model="store.data.routeline"
            />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">状态</div>
          <div style="width: 90%">
            <input
              style="width: 100%"
              type="text"
              v-model="store.data.status"
            />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">是否标星</div>
          <div style="width: 90%">
            <input
              style="width: 100%"
              type="text"
              v-model="store.data.isstat"
            />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">供应商</div>
          <div style="width: 90%">
            <input style="width: 100%" type="text" v-model="store.data.isgys" />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">联系人</div>
          <div style="width: 90%">
            <input
              style="width: 100%"
              type="text"
              v-model="store.data.linkname"
            />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">说明</div>
          <div style="width: 90%">
            <input
              style="width: 100%"
              type="text"
              v-model="store.data.explain"
            />
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">合同数</div>
          <div style="width: 90%">
            <input style="width: 100%" type="text" v-model="store.data.htshu" />
          </div>
        </div>
      </div>
      <template #footer>
        <p class="bottom">
          <el-button @click="edits">保存(s)</el-button>
          <el-button @click="()=>{update=false}">取消</el-button>
        </p>
      </template>
    </hdialog>
    <hdialog v-model="xiang" :width="`800px`" class="name">
      <h1 class="h1">客户管理</h1>
      <div class="namsex">
        <div style="display: flex">
          <div style="width: 10%">合同编号</div>
          <div style="width: 90%">{{ store.list.num }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">客户名称</div>
          <div style="width: 90%">{{ store.list.custid }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">拥有者</div>
          <div style="width: 90%">{{ store.list.base_name }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">销售机会</div>
          <div style="width: 90%">{{ store.list.saleid }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">签约日期</div>
          <div style="width: 90%">{{ store.list.signdt }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">合同金额</div>
          <div style="width: 90%">{{ store.list.money }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">生效日期</div>
          <div style="width: 90%">{{ store.list.startdt }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">截止日期</div>
          <div style="width: 90%">{{ store.list.enddt }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">合同内容</div>
          <div style="width: 90%">{{ store.list.content }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">代付款</div>
          <div style="width: 90%">{{ store.list.statentext }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">说明</div>
          <div style="width: 90%">{{ store.list.expiain }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">状态</div>
          <div style="width: 90%">已过期</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">创建人</div>
          <div style="width: 90%">{{ store.list.createname }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">操作时间</div>
          <div style="width: 90%">2024-01-22 08:44:29</div>
        </div>
      </div>
      <template #footer>
        <p class="bottom">
          <el-button @click="()=>{xiang=false}">取消</el-button>
        </p>
      </template>
    </hdialog>
    <hdialog v-model="sel">
      <div class="divs">
        <div v-for="item in list" :key="item.id">
          <el-checkbox v-model="item.flag" size="large">{{
            item.name
          }}</el-checkbox>
        </div>
      </div>
      <template #footer>
        <div class="bottom">
          <el-button @click="seleed">保存(s)</el-button>
          <el-button @click="">取消</el-button>
        </div>
      </template>
    </hdialog>
    <div style="display: flex" class="mt-4">
      <el-input
        v-model="inp"
        class="ml-2 mr-2"
        style="width: 150px; height: 30px"
        placeholder="关键字"
      ></el-input>
      <el-button @click="handeltable">搜索</el-button>
      <el-button @click="handeltable">重新统计</el-button>
    
      <el-button
        v-for="item in bntlist"
        @click="itemid(item.id)"
        :key="item.id"
        :class="{ on: item.id == oneid }"
        >{{ item.name }}</el-button
      >
    </div>
    <!-- 自定义列表 -->
    <hdialog v-model="mo" :width="`800px`">
      <template #title>
        <h3>(新增)客户管理</h3>
      </template>
      <h3 class="h3">客户管理</h3>
      <table class="table">
        <tr>
          <td>合同</td>
          <td>
            <el-select
              v-model="store.mony.hitd"
              placeholder="--请选择--"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </td>
          <td>客户名称</td>
          <td style="display: flex">
            <el-input v-model="store.mony.custid" type="text" /><Button
              type="primary"
              >选择</Button
            >
          </td>
        </tr>
        <tr>
          <td>所属日期</td>
          <td style="display: flex">
            <el-date-picker
              v-model="store.mony.dt"
              type="date"
              placeholder="选择日期"
              style="width: 240px"
            /><Button type="primary">选择</Button>
          </td>
          <td></td>
          <td>
            
          </td>
        </tr>
        <tr>
          <td>类型</td>
          <td>
            <el-select
              v-model="store.mony.type"
              placeholder="--请选择--"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </td>
          <td>金额</td>
          <td>
            <el-input v-model="store.list.moneys" type="text" />
          </td>
        </tr>
        <tr>
          <td>是否付款</td>
          <td>  <el-select
              v-model="store.mony.ispay"
              placeholder="--请选择--"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in optionsone"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select></td>
          <td>收款日期</td>
          <td><el-date-picker
              v-model="store.mony.paydt"
              type="date"
              placeholder="选择日期"
              style="width: 240px"
            /></td>
        </tr>
        <tr>
          <td>说明</td>
          <td colspan="4">
            <el-input
              v-model="store.mony.explain"
              style="width: 100%"
              :rows="3"
              type="textarea"
              placeholder="Please input"
            />
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>相关文件</td>
          <td colspan="4">
            <el-input
     
              style="width: 100%"
              :rows="3"
              type="textarea"
              placeholder="Please input"
            />
          </td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <hr />
      <template #footer>
        <div class="bottom">
          <el-button class="right_bnt" @click="addsx">保存(s)</el-button>
        </div>
      </template>
    </hdialog>
    <!-- 表格 -->
    <el-table
      ref="singleTableRef"
      highlight-current-row
      empty="没有数据"
      :data="filterTable"
      :border="true"
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" width="50" />
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column
        v-for="item in newlist"
        :key="item.id"
        :prop="item.type"
        :label="item.name"
      />
      <!-- 添加其他列 -->
      <!-- 添加操作列 -->
      <el-table-column>
        <template #default="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link">
              操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="shows(row)">详情</el-dropdown-item>
                <el-dropdown-item @click="showlist(row)"
                  >详情(新窗口)</el-dropdown-item
                >
                <el-dropdown-item>评论</el-dropdown-item>
                <el-dropdown-item @click="shows(row)"
                  >添加提醒设置</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: skyblue;
  display: flex;
  align-items: center;
}
.on {
  background-color: transparent;
  display: inline-block;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-color: #4e4f50;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
}

.el-button {
  margin: 0;
  color: black;
}
.el-button:focus {
  color: black;
}
.el-button:hover {
  background: none;
  border-color: #4e4f50;

  color: black;
}
.mar {
  margin-right: 10px;
}
.el-scrollbar {
  border-radius: 70px;
}
.el-scrollbar__view .el-select-dropdown__list {
  border-radius: 70px;
}
.table {
  border: 1px solid black;
  width: 90%;
  margin: 0 auto;
}
.table tr td {
  border: 1px solid black;
}
.right_bnt {
  position: absolute;
  right: 0;
  margin-right: 10px;
  margin-top: 2px;
}
.bottom {
  margin-top: 20px;
  width: 100%;
  height: 40px;
  background: rgb(238, 238, 238);
}
.h3 {
  text-align: center;
  margin: 10px;
  font-size: 20px;
  font-weight: bold;
}
tr {
  width: 120%;
}
tr td {
  margin: 0 auto;
}
.divs {
  height: 200px;
  overflow: auto;
}
.name div {
  border: 1px solid black;
}
.namsex {
  width: 600px;
  margin: 0 auto;
}
.namsex div {
  height: 50px;
  line-height: 50px;
}
.h1 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
</style>
